* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.g-container {
  position: relative;
  height: 100vh;
  min-width: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;

  /* 1. "&" 纯用于scss语法当中的, 表示当前元素(g-container) */
  & > div {
    height: 100vh;
    text-align: center;
    color: #fff;
    line-height: 100vh;
    font-size: 3vw;
  }
}

.g-middle {
  /* 2. order ->用于定义弹性容器中项目的布局顺序 */
  /* 该属性决定了元素在容器中的排列顺序，数值越小，排列越靠前，默认值为0 */
  order: 2;

  /* 3. flex属性是 ->flex-grow、flex-shrink、flex-basis的简写 */
  flex: auto 1 0 ;
  background: #cc6630;
}

.g-left {
  order: 1;
  flex: 200px 0 0;
  background: #ffcc00;
}

.g-right {
  order: 3;
  flex: 200px 0 0;
  background: pink;
}